<template lang="html">
  <div class="">
    <el-form :model="form" ref="form">
      <el-form-item prop="phone" label="" :rules="rules.phone">
        <el-input type="phone" v-model="form.phone" placeholder="请输入手机号">
          <template slot="prepend"><i class="el-icon-user"></i></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="pwd" label="" :rules="rules.pwd">
        <el-input type="password" show-password v-model="form.pwd" placeholder="请输入密码">
          <template slot="prepend"><i class="el-icon-lock"></i></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="pwd2" label="" :rules="rules.pwd2">
        <el-input type="password" show-password v-model="form.pwd2" placeholder="请再次输入密码">
          <template slot="prepend"><i class="el-icon-lock"></i></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="qq" label="" :rules="rules.qq">
        <el-input type="qq" v-model="form.qq" placeholder="请输入QQ号">
          <template slot="prepend"><i class="el-icon-lock"></i></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="invitationCode" label="" :rules="rules.invitationCode">
        <el-input type="invitationCode" v-model="form.invitationCode" placeholder="请输入邀请码">
          <template slot="prepend"><i class="el-icon-lock"></i></template>
        </el-input>
      </el-form-item>
      <el-button type="primary" @click="submitForm('form')" class="w100">注册</el-button>
    </el-form>
  </div>
</template>
·
<script>
import md5 from "md5";
import lf from "localforage";
export default {
  name: "login",
  data() {
    // 手机号验证要求
    let validateMobile = (rule, value, callback) => {
      let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!reg.test(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    // 密码安全性要求
    let validatePass1 = (rule, value, callback) => {
      // 6-16位, 数字, 字母, 字符至少包含两种, 同时不能包含中文和空格
      let reg = /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^[^\s\u4e00-\u9fa5]{6,16}$/;
      if (!reg.test(value)) {
        callback(new Error("密码长度需6-16位，数字、字母、字符至少包含两种"));
      } else {
        callback();
      }
    };
    // 监测两次密码是否相同
    let validatePass2 = (rule, value, callback) => {
      value === ""
        ? callback(new Error("请再次输入密码"))
        : value !== this.form.pwd
        ? callback(new Error("两次输入密码不一致!"))
        : callback();
    };
    // 手机qq要求
    let validateQQ = (rule, value, callback) => {
      let reg = /^\d{5,11}$/;
      if (!reg.test(value)) {
        callback(new Error("请输入正确的QQ号"));
      } else {
        callback();
      }
    };
    return {
      form: {
        phone: "",
        pwd: "",
        pwd2: "",
        qq: "",
        invitationCode: "",
      },
      rules: {
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: validateMobile, trigger: "blur" },
        ],
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: validatePass1, trigger: "blur" },
        ],
        pwd2: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" },
        ],
        qq: [
          { required: true, message: "QQ号不能为空", trigger: "blur" },
          { validator: validateQQ, trigger: "blur" },
        ],
        invitationCode: [{ required: true, message: "邀请码不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) return;

        let pwd = md5(this.form.pwd);
        let pwd2 = md5(this.form.pwd2);
        const opt = this.form;
        const formData = new FormData();
        formData.append("phone", opt.phone);
        formData.append("pwd", pwd);
        formData.append("pwd2", pwd2);
        formData.append("qq", opt.qq);
        formData.append("invitationCode", opt.invitationCode);
        // console.log(typeof opt.qq, "qq");
        const { data: res } = await this.$http.post("register", formData);
        // console.log(res.data, "返回的数据");
        if (res.code != "0") return this.$message(res.msg);

        this.$message.success("注册成功，请登录");
        await lf.setItem("tempUser", res.data);
        //  Register 设计为了 Login 的组件，所以成功跳转时刷新一次页面
        this.$router.go(0);
        this.$router.push("/login");
      });
    },
  },
};
</script>

<style lang="scss"></style>
